<script lang="ts" setup>
import {onBeforeMount, reactive, ref} from 'vue'
import {getAPI} from "@/api/MyAxiosAPI";
import type {ProjectInterface, ResponseInterface} from "@/type/models";
import {ElMessage} from "element-plus";
import router from "@/router";
// --- API ---
const MOCK = false
const API = getAPI(MOCK)
// --- end API ---

// --- 创建项目 ---
const showCreateProjectView = ref<boolean>(false)
const form = reactive({
  name: '',
})

/**
 * 创建项目API
 */
function createProjectAPI() {
  API({
    url: "/project/create",
    method: "post",
    headers: {
      Authorization: localStorage.getItem("token")
    },
    data: form
  }).then(res => {
    let r: ResponseInterface = res.data
    if (r.code === 200) {
      ElMessage.success("创建成功")
      form.name = ""
      showCreateProjectView.value = false
    }
  })
}

// --- end 创建项目 ---

// --- 展示项目 ---
const projectList = reactive<Array<ProjectInterface>>([])
const inviteShow = ref<boolean>(false)
let inviteUserEmail = ref<string>("")

/**
 * 获取项目API
 */
function getProjectListAPI(page: number) {
  API({
    url: "/project/list/" + page,
    method: "get",
    headers: {
      Authorization: localStorage.getItem("token")
    }
  }).then(res => {
    let r: ResponseInterface = res.data
    if (r.code === 200) {
      projectList.push(...r.data)
    }
  })
}

function inviteUserAPI(pId: string) {
  API({
    url: "/project/" + pId + "/invite/" + inviteUserEmail.value,
    method: "post",
    headers: {
      Authorization: localStorage.getItem("token")
    }
  }).then(res => {
    let r: ResponseInterface = res.data
    if (r.code === 200) {
      ElMessage.success("邀请成功")
      inviteShow.value = false
    }
  })
}

// --- end 展示项目 ---

//路由到项目详情页面
function gotoProjectDetail(pId: string) {
  localStorage.setItem("currentlyProjectId", pId);
  router.push("/project-info")
}

// --- 生命周期 ---
onBeforeMount(() => {
  getProjectListAPI(1)
})
// --- end 生命周期 ---
</script>

<template>
  <h1>Project</h1>
  <!--新建项目-->
  <el-row>
    <el-button @click="showCreateProjectView = true">创建项目</el-button>
  </el-row>
  <el-dialog
      v-model="showCreateProjectView"
      title="创建新项目"
      width="30%"
  >
    <el-form :model="form">
      <el-form-item label="项目名称">
        <el-input v-model="form.name"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="createProjectAPI">创建</el-button>
        <el-button @click="showCreateProjectView = false">取消</el-button>
      </span>
    </template>
  </el-dialog>
  <!--end 新建项目-->
  <!--展示项目-->
  <el-row>
    <el-col v-for="item in projectList" :key="item.pId" :span="6">
      <el-card shadow="hover">
        <template #header>
          <div class="card-container">
            <span class="card-name">{{ item.name }}</span>
            <el-button text @click="gotoProjectDetail(item.pId)">进入</el-button>
            <el-button text @click="inviteShow = true">邀请</el-button>
          </div>
        </template>
      </el-card>
      <el-dialog
          v-model="inviteShow"
          title="邀请成员"
          width="30%"
      >
        <el-form>
          <el-form-item label="用户邮箱">
            <el-input v-model="inviteUserEmail"/>
          </el-form-item>
        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="inviteUserAPI(item.pId)">邀请</el-button>
        <el-button @click="inviteShow = false">取消</el-button>
      </span>
        </template>
      </el-dialog>
    </el-col>
  </el-row>
  <!--end 展示项目-->
</template>

<style scoped>
.card-container {
  display: flex;
  justify-content: flex-start; /* 默认值，可以省略 */
}

.card-name {
  margin-right: auto; /* 让文本与按钮之间有足够的间距 */
}
</style>